<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/7/20
  Time: 16:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <%--引入vue的js--%>
    <script type="text/javascript" src="/js/vue.js"></script>
    <%--引入elementui的js--%>
    <script type="text/javascript" src="/js/index.js"></script>
    <%--引入axios的js 发送异步请求--%>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <%--引入elementui的css--%>
    <link type="text/css" rel="stylesheet" href="/css/index.css">
</head>
<body>
   <div id="app">
       <div class="login_container">
           <!-- 登录盒子  -->
           <div class="login_box">
               <!-- 头像 -->
               <div class="avatar_box">
                   <img src="/images/logo.jpg" alt="">
               </div>
               <!-- 登录表单 -->
               <el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="0px" class="login_form">
                   <!-- 用户名 -->
                   <el-form-item prop="username">
                       <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" ></el-input>
                   </el-form-item>
                   <!-- 密码 -->
                   <el-form-item prop="password">
                       <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
                   </el-form-item>
                   <!-- 按钮 -->
                   <el-form-item class="btns">
                       <el-button type="primary" @click="login">登录</el-button>
                       <el-button type="info" >重置</el-button>
                   </el-form-item>
               </el-form>
           </div>
       </div>
   </div>
</body>
<script>
    let app=new Vue({
          el:"#app",
          data:{
              loginForm:{
                  username:"小张",
                  password:"111"
              },
              //表单校验对象
              loginRules:{
                  username:[
                      {required:true,message:"请输入账号",trigger:blur}
                  ],
                  password:[
                      {required:true,message:"请输入密码",trigger:blur}
                  ]
              }
          },
          methods:{
              //重置事件
              reset(){
                 this.$refs.loginForm.resetFields();
              },
               //登录按钮事件
               login(){
                   //表单校验
                   this.$refs.loginForm.validate((valid)=>{
                         if(valid){//表单校验通过
                              axios.post("/login",this.loginForm).then(result=>{
                                   if(result.data.code==200){
                                        //消息
                                        this.$message.success(result.data.msg);
                                        //跳转
                                        location.href="/index.jsp";
                                   }else{
                                       this.$message.error(result.data.msg);
                                   }
                              })
                         }
                   })
               }
          }
    })
</script>
<style>
      html,body,#app{
          width: 100%;
          height: 100%;
          padding: 0px;
          margin: 0px;
      }
      .login_container {
          background: url("/images/keyboard.jpg");
          height: 100%;
      }
      .login_box {
          width: 450px;
          height: 300px;
          background: #fff;
          border-radius: 3px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
      }
     .login_box>.avatar_box {
         height: 130px;
         width: 130px;
         border: 1px solid #eee;
         border-radius: 50%;
         padding: 10px;
         box-shadow: 0 0 10px #ddd;
         position: absolute;
         left: 50%;
         transform: translate(-50%, -50%);
         background-color: #fff;
     }
      .login_box>.avatar_box>img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #eee;
      }
      .login_form {
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: 0 20px;
          box-sizing: border-box;
      }
      .btns {
          display: flex;
          justify-content: flex-end;
      }
</style>
</html>
